<template>
    <div class="table">
        <el-table :data="list">
            <el-table-column  prop="course_img" label="课程图片">
                <!-- 插槽 -->
                 <template #default="scope">
                    <img class="course_img" :src="scope.row.course_img" alt="">
                     <!-- <p>{{ scope.row.point }}</p> -->
                 </template>
            </el-table-column>
            <el-table-column prop="title" label="课程名称">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column prop="point" label="学分">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="editBtn(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" @click="delCourseBtn(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
// 接收父组件传来的参数
const { list, editBtn, delCourseBtn } = defineProps(['list', 'editBtn', 'delCourseBtn'])
</script>
<style lang="less" scoped>
.course_img{
    width: 100px;
    height: 100px;
}
</style>